@if (avatarUrl) {

    @if (linkProfile) {
        <img class="userpicture" [url]="avatarUrl" [alt]="fullname" core-external-content (onLoad)="imageLoaded($event)"
            (ariaButtonClick)="gotoProfile($event)" [siteId]="siteId" [hidden]="imageError">
    } @else {
        <img class="userpicture" [url]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
            (onLoad)="imageLoaded($event)" aria-hidden="true" [siteId]="siteId" [hidden]="imageError">
    }

}
@if (!avatarUrl || imageError){
    @if (initials) {
        @if (linkProfile) {
            <div class="userinitials" [attr.aria-label]="fullname" [title]="fullname" (ariaButtonClick)="gotoProfile($event)"
                [attr.data-initials]="initials">
            </div>
        } @else {
            <div class="userinitials" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}"
                [title]="'core.pictureof' | translate:{$a: fullname}" role="img" [attr.data-initials]="initials" aria-hidden="true">
            </div>
        }
    } @else {
        <!-- During loading -->
        <img class="userpicture_loading" src="assets/img/user-avatar.png" role="presentation" aria-hidden="true" alt="">
    }
}

@if (checkOnline && isOnline()) {
    <span class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">
    </span>
}

<ng-content />
